<template>
  <div class="app-container">

    <el-card class="box-card">
      <h3>{{$t('发布消息')}}</h3>

      <el-form ref="message" :rules="rules" :model="message" label-width="150px">
        <el-form-item :label="$t('消息标题')" prop="title">
          <el-input v-model="message.title"/>
        </el-form-item>
        <el-form-item :label="$t('消息类型')" prop="type">
          <el-radio v-model="message.type" :label="1" border>{{$t('系统消息')}}</el-radio>
          <el-radio v-model="message.type" :label="2" border>{{$t('站内消息')}}</el-radio>
        </el-form-item>
       <el-form-item v-show="message.type == 2" label="接收对象" prop="receiverNumber">
          <el-row>
            <span>{{message.receiverNumber}}个对象</span>
            <el-col>
              <el-button type="primary" @click="handleAdd">添加对象</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-show="message.type == 2" :label="$t('接受者等级')">
          <el-checkbox-group v-model="message.receiverLevels">
            <el-checkbox v-for="op in levelMember" :label="op.id">{{op.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('消息内容')" prop="content">
          <el-input v-model="message.content" type="textarea" placeholder=""/>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="op-container" style="padding-top:20px;">
      <el-button @click="handleCancel">{{$t('Cancel')}}</el-button>
      <el-button v-permission="['POST /admin/message/create']" type="primary" @click="handleCreate">{{$t('Confirm')}}</el-button>
    </div>

    <!-- 选择用户对话框 -->
    <el-dialog :visible.sync="userDialogVisible" title="详情">
      <template>
        <el-transfer
          filterable
          :titles="[$t('用户'), $t('已选择')]"
          :filter-method="filterUserMethod"
          :filter-placeholder="$t('请输入用户名')"
          v-model="selecteds"
          :props="{
            key: 'id',
            label: 'label'
          }"
          :data="users">
        </el-transfer>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectUser">{{$t('Confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {userOption} from '@/api/user'
  import { createMessage } from '@/api/message'
  import { MessageBox } from 'element-ui'
  import { levelMemberList, payMemberList } from '../../api/user'
  export default {
    name: "messageCreate",
    data(){

      return {
        levelMember: [],
        message: {
          title: undefined,
          type: 1,
          receiverNumber: 0,
          content: undefined,
          receiverLevels:[]
        },
        rules: {
          title: [
            { required: true, message: this.$t('不能为空'), trigger: 'blur' }
          ],
          type: [
            { required: true, message: this.$t('不能为空'), trigger: 'blur' }
          ],
          content: [{ required: true, message: this.$t('不能为空'), trigger: 'blur' }]
        },
        userDialogVisible: false,
        users:[],
        selecteds:[]
      }
    },
    created(){
      this.getData()
      this.getLevelMember()
    },
    methods: {
      getData(){
        userOption().then(response=>{
          this.users = response.data.data
        })
      },
      getLevelMember(){
        var dataLevel = {
          page: 1,
          limit: 10000,
          status: 2,
        }
        levelMemberList(dataLevel).then(response => {
          this.levelMember = response.data.data.list
        }).catch(() => {
          this.levelMember = []
          this.listLoading = false
        })
      },
      handleCreate(){
        // console.log(this.selecteds)
        if(this.selecteds.length){
          this.message.receiverNumber = this.selecteds.length
        }
        this.$refs['message'].validate(valid=>{
          if(valid){
            let data = {
              message: this.message,
              users: this.selecteds
            }
            createMessage(data)
              .then(response => {
              this.$notify.success({
                title: this.$t('Success!'),
                message: this.$t('Creation_successful')
              })
              this.$router.push({ path: '/message/list' })
            })
              .catch(response => {
                MessageBox.alert(this.$t('Error') + this.$t(response.data.errmsg), this.$t('Warning'), {
                  confirmButtonText: this.$t('Confirm'),
                  type: 'error'
                })
              })
          }
        })
      },
      handleCancel(){
        this.$router.push({path:'/message/list'})
      },
      handleAdd(){
        this.userDialogVisible = true
      },
      selectUser() {
        this.userDialogVisible = false
        this.message.receiverNumber = this.selecteds.length
      },
      filterUserMethod(query, item){

        return item.label.indexOf(query) > -1
      }
    }
  }
</script>

<style scoped>

</style>
